<template>
    <!--地图挂载dom-->
    <div id="map">
    </div>
</template>

<script>
    //引入依赖
    import {Map, View} from 'ol'
    import XYZ from 'ol/source/XYZ'
    import {Vector as VectorSource} from 'ol/source';
    import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
    import {GeoJSON} from 'ol/format';
    import {Fill, Style, Stroke} from 'ol/style';
    import axios from 'axios';
    import {LineString} from 'ol/geom';
    import {fromExtent} from 'ol/geom/Polygon';
    import Feature from 'ol/Feature';

    export default {
        name: 'ProjectBackCoverLayer',
        data() {
            return {
                map: null,
                reverseLayer: null,
            }
        },
        mounted() {

            this.$nextTick(() => {
                //初始化地图
                this.TiandiMap = new TileLayer({
                    name: "天地图影像图层",
                    source: new XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=9893433c99cfb657e6ec3a92fe4068e5",
                    }),
                });
                this.map = new Map({
                    target: 'map',//指定挂载dom，注意必须是id
                    layers: [
                        this.TiandiMap
                    ],
                    //配置视图
                    view: new View({
                        center: [113.24981689453125, 26.126468438108688],   //视图中心位置
                        projection: "EPSG:4326", //指定投影
                        zoom: 5   //缩放到的级别
                    })
                });
                this.addReverseLayer();
                this.draw();
            })
        },
        methods: {
            // 反转遮罩层
            addReverseLayer() {
                let source = new VectorSource();
                // 遮罩的样式
                let style = new Style({
                    fill: new Fill({
                        color: "rgba(8,31,63,0.5)",
                    }),
                    stroke: new Stroke({
                        color: "rgb(8,91,163)",
                        width: 1
                    })
                });
                this.reverseLayer = new VectorLayer({source, style});
                this.map.addLayer(this.reverseLayer);
            },
            /**
             * @param data 某个行政区域的轮廓数据
             */
            draw(data) {
                axios.get("https://geo.datav.aliyun.com/areas_v3/bound/440100_full.json")
                    .then((response) => {
                        console.log(response);
                        // 将data转换为feature
                        const features = new GeoJSON().readFeatures(response.data);
                        // 擦除遮盖层数据
                        const coverGeom = erase(features);
                        const convertFt = new Feature({geometry: coverGeom});
                        this.reverseLayer.getSource().addFeature(convertFt);
                        //this.map.getView().fit(coverGeom);
                    })


                function erase(features) {
                    //全球的范围
                    const polygonRing = fromExtent([-180, -90, 180, 90]);
                    // 擦除操作
                    for (let i = 0, len = features.length; i < len; i++) {
                        let g = features[i].getGeometry();
                        const coords = g.getCoordinates();
                        coords.forEach(coord => {
                            //将坐标用线环链接起来
                            const linearRing = new LineString(coord[0]);
                            //给多边形追加线环
                            polygonRing.appendLinearRing(linearRing);
                        });
                    }
                    return polygonRing;
                }
            }
        }
    }
</script>

<style scoped>
    #map {
        width: 100%;
        height: 100%;
    }
</style>
